<template>
    <div>
    <div @click="dialogFormVisible = true">
        <img class="tupian1" src="../assets/rili.jpg" />
                    <span>日历</span>
    </div>
    <img class="tupian1" src="../assets/rili.jpg" />
                    <span>日历</span>
  <div>
    <el-dialog title="日历" :visible.sync="dialogFormVisible"  @closed="handleClose">
        
        <full-calendar :events="monthData" class="test-fc"
                         first-day='1' locale="fr"
                         top="200px"
                         defaultView="dayGridMonth"
                         @changeMonth="changeMonth"    
                         @eventClick="eventClick"      
                         @dayClick="dayClick"        
                         @moreClick="moreClick"
                         >
        </full-calendar>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleSave">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</div>
</template>

<script>
    import { FullCalendar } from 'vue-fullcalendar'
export default {
    components: {'full-calendar': require('vue-fullcalendar')},
    // components: {FullCalendar},
  data () {
    return {
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px',
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },

  methods: {
    handleClose () {
      this.$refs.ruleForm.resetFields()
      this.form = {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      }
    },
    handleSave () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log('输入正确')
          this.dialogFormVisible = false
        } else {
          console.log('输入错误')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
